<script>
import UploadImage from '@/components/UploadImage/UploadImage.vue'

export default {
  name: 'setmealForm',
  props: {
    setmealList: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      formRef: null,
      formData: {
        // 分类di
        categoryId: '',
        // 分类描述
        description: '',
        // 套餐包含得到菜品
        setmealDishes: [],
        // 菜品图片
        image: '',
        // 菜品名称
        name: '',
        // 菜品价格
        price: '',
        // 菜品状态
        status: 1
      },
      formRules: {
        description: [
          { required: true, message: '请输入套餐描述', trigger: 'blur' }
        ],
        image: [
          { required: true, message: '请上传套餐图片', trigger: 'chane' }
        ],
        name: [
          { required: true, message: '请输入套餐名称', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '请输入套餐价格', trigger: 'blur' }
        ],
        categoryId: [
          { required: true, message: '请选择套餐分类', trigger: 'change' }
        ]
      },
      dialogVisible: false,
      dishList: []
    }
  },
  methods: {
    /* 获取菜品分类的回调函数 */
    async fetchDishOrStemCategory() {
      try {
        this.dishList = await this.$store.dispatch('dishStore/fetchDishOrStemCategoryAction', 1)
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    async handleSubmit() {
      const validate = await this.$refs.formRef.validate().catch(error => error)
      if (!validate) return
    },
    uploadSuccess() {
      this.$refs.formRef.validateField('image')
    },
    resetForm() {
      this.$refs.formRef.resetFields()
    },

    handleAddDish() {
      this.dialogVisible = true
    }

  },
  mounted() {
    this.fetchDishOrStemCategory()
  },

  components: { UploadImage }
}
</script>

<template>
  <div class="form">
    <el-form size="small" label-width="100px" :model="formData" :rules="formRules" ref="formRef">
      <el-form-item label="套餐名称:" prop="name">
        <el-input placeholder="请输入套餐名称" v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="套餐分类:" prop="categoryId">
        <el-select class="select-setmeal" placeholder="请输入套餐分类" v-model="formData.categoryId">
          <el-option :value="item.id" :label="item.name" v-for="(item) in setmealList" :key="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="套餐价格:" prop="price">
        <el-input placeholder="请输入套餐价格" v-model="formData.price"></el-input>
      </el-form-item>
      <el-form-item label="套餐菜品:">
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleAddDish">添加菜品</el-button>
      </el-form-item>
      <el-form-item label="套餐图片:" prop="image">
        <upload-image v-model="formData.image" @uploadSuccess="uploadSuccess"></upload-image>
      </el-form-item>
      <el-form-item label="套餐描述:" prop="description">
        <el-input type="textarea" :rows="5" placeholder="请输入套餐描述" v-model="formData.description"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small">取消</el-button>
        <el-button size="small" type="primary" @click="handleSubmit">保存</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<style scoped lang="scss">
.select-setmeal {
  width: 100%;
}

.form {
  background-color: #fff;
  padding: 20px;
}

::v-deep .el-drawer {
  width: 40% !important;
}

::v-deep .el-dialog__body {
  display: flex;

  .right, .center {
    flex: 1;
  }

  .left {
    flex: .5;
  }
}
</style>
